<template>
  <div>
    <el-table
        :data="weibos"
        style="width: 100%"
        :row-class-name="tableRowClassName">
      <el-table-column
          prop="created"
          fixed
          label="日期"
          width="240">
      </el-table-column>
      <el-table-column
          prop="username"
          label="姓名"
          width="100">
      </el-table-column>
      <el-table-column
          prop="content"
          label="发布内容"
          width="200">
      </el-table-column>
      <el-table-column
          fixed="right"
          label="操作"
          width="170">
        <template slot-scope="scope">
          <div style="display: flex">
            <div style="margin-right: 10px">
              <el-popconfirm
                  title="这是一段内容确定删除吗？" @confirm="deleteById(scope.row.weiboId)">
                <el-button slot="reference" type="text" size="small">移除</el-button>
              </el-popconfirm>
            </div>
            <el-button type="text" @click="editContent(scope.row)" size="small">编辑</el-button>
          </div>
        </template>
      </el-table-column>
    </el-table>


    <el-drawer
        title="编辑"
        :before-close="handleClose"
        :visible.sync="dialog"
        direction="ltr"
        custom-class="demo-drawer"
        ref="drawer">
      <div class="demo-drawer__content">
        <div style="margin: 10px 20px">
          <el-form>
            <el-form-item prop="desc">
              <el-input type="textarea" placeholder="说点什么..." v-model="weibo.content"></el-input>
            </el-form-item>
          </el-form>
        </div>
        <div class="demo-drawer__footer">
          <el-button @click="cancelForm">取 消</el-button>
          <el-button type="primary" @click="submitForm()" :loading="loading">
            {{ loading ? '提交中 ...' : '确 定' }}
          </el-button>
        </div>
      </div>
    </el-drawer>
  </div>
</template>

<script>
export default {
  data() {
    return {
      weibos: [
        {
          created: '',
          username: '',
          content: ''
        },
      ],
      dialog: false,
      loading: false,
      weibo: {content: ''}
    }
  },
  methods: {
    submitForm(){
      this.weibo.userId = JSON.parse(localStorage.getItem('user')).id;
      this.weibo.id=this.weibo.weiboId;
      this.axios.post('http://localhost:19000/v1/weibo/update-weibo',this.qs.stringify(this.weibo))
      .then((response)=>{
        if (response.data.code == 20000) {
          this.$message.success("发布成功！！！")
          this.$router.go(0)
        }else{
          this.$message.error(response.data.message)
        }
      })
    },
    editContent(content) {
      this.weibo = content;
      this.dialog = true;
    },
    deleteById(id) {
      this.axios.delete('http://localhost:19000/v1/weibo/delete-weibo',
          {
            params: {
              id: id
            }
          })
          .then((response) => {
            if (response.data.code == 20000) {
              this.$message.success("删除成功！！！")
              this.$router.go(0)
            } else {
              this.$message.error(response.data.message)
            }
          })
    },
    tableRowClassName(row, rowIndex) {
      if (rowIndex === 1) {
        return 'warning-row';
      } else if (rowIndex === 3) {
        return 'success-row';
      }
      return '';
    },
    handleClose(done) {
      if (this.loading) {
        return;
      }
      this.$confirm('确定要重新发布吗？')
         .then(() => {
            this.loading = true;
            this.timer = setTimeout(() => {
              done();
              // 动画关闭需要一定的时间
              setTimeout(() => {
                this.loading = false;
              }, 400);
            }, 2000);
          })
        .catch(()=>{})
    },
    cancelForm() {
      this.loading = false;
      this.dialog = false;
      clearTimeout(this.timer);
    }
  },
  mounted() {
    this.axios.post('http://localhost:19000/v1/weibo/weibos', this.qs.stringify(JSON.parse(localStorage.getItem('user'))))
        .then((response) => {
          if (response.data.code === 20000) {
            this.weibos = response.data.data;
          }
        })
  }
}
</script>


<style scoped>
.demo-drawer__footer {
  text-align: right;
  margin-top: 100px;
  margin-right: 20px;
}

/deep/ .el-textarea__inner {
  background-color: #f4f4f4;
  line-height: 1.5;
}

/deep/ .el-textarea__inner {
  height: 200px;
}

.el-table .warning-row {
  background: oldlace;
}

.el-table .success-row {
  background: #f0f9eb;
}
</style>